<div class="close-dialog">
    <button mat-icon-button="" (click)="onClose()">
        <mat-icon>close</mat-icon>
    </button>
</div>

<form [formGroup]="addressBookAdd">
    <div class="add-contact-window">
        <h1 mat-dialog-title>{{ 'Settings.AddContact.Title' | translate }}</h1>
        <div mat-dialog-content>
            <div class="contact-name-field">
                <mat-form-field appearance="outline">
                    <mat-label>{{ 'Settings.AddContact.Name' | translate }}</mat-label>
                    <input type="text" matInput [placeholder]="'Settings.AddContact.NamePlaceholder' | translate" formControlName="name">
                </mat-form-field>

                <mat-form-field appearance="outline">
                    <mat-label>{{ 'Settings.AddContact.Email' | translate }}</mat-label>
                    <input type="email" matInput [placeholder]="'Settings.AddContact.EmailPlaceholder' | translate" formControlName="email">
                </mat-form-field>

                <mat-form-field appearance="outline">
                    <mat-label>{{ 'Settings.AddContact.Address' | translate }}</mat-label>
                    <input type="text" matInput [placeholder]="'Settings.AddContact.AddressPlaceholder' | translate" formControlName="address"
                           [value]="addressBookAdd.value.address">
                    <mat-icon matSuffix class="check-success" *ngIf="addressBookAdd.controls.address.status == 'VALID'">check</mat-icon>
                    <mat-icon matSuffix class="check-fail" *ngIf="addressBookAdd.controls.address.status == 'INVALID'">close</mat-icon>
                    <mat-hint class="warning-hint-field" *ngIf="addressBookAdd.value.address && addressBookAdd.controls.address.status == 'INVALID'">
                        {{'Settings.AddContact.WarningAddress' | translate:{appName: appName} }}
                    </mat-hint>
                </mat-form-field>
            </div>
        </div>

        <div mat-dialog-actions>
            <button mat-stroked-button color="primary"
                    (click)="save()"
                    [disabled]="addressBookAdd.invalid"
                    class="tron-default-button default-theme">
                {{ 'Settings.AddContact.Add' | translate }}
            </button>
        </div>
    </div>
</form>
